<!--markdown 编辑器说明文档 https://github.com/hinesboy/mavonEditor -->
<template>
  <div style="height: 100%">
    <navigation></navigation>
    <el-row >
      <el-col :sm="{span:24}" :xl="{span:14,offset:5}" :lg="{span:18,offset:3}" :md="{span:18,offset:3}">
        <div style="margin-top: 15px;">
          <el-page-header class="title" @back="goBack" title="返回" :content="title">
          </el-page-header>

          <div class="button" v-show="canEdit">
            <el-button icon="el-icon-edit" size="mini" @click="edit">编辑</el-button>
          </div>
        </div>

        <div style="clear: both"></div>
        <mavon-editor class="editor"
                      :toolbarsFlag="toolbarsFlag"
                      :navigation="navigation"
                      :subfield="subfield"
                      :editable="editable"
                      :defaultOpen="defaultOpen"
                      v-model="markdown"/>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {mavonEditor} from 'mavon-editor';
import qs from 'qs'
import Navigation from "../components/Navigation";

const axios = require('axios')

export default {
  components: {
    Navigation,
    "mavon-editor": mavonEditor
  },
  data() {
    return {
      title: '',
      html: '',
      markdown: '',
      value: '',
      toolbarsFlag: false,
      navigation: false,
      editable: false,
      defaultOpen: 'preview',
      subfield: false,
      canEdit: false
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    edit() {
      this.$router.push({
        path: '/write',
        query: {
          id: this.$route.query.id
        }
      })
    }
  },
  mounted: function () {
    console.info("this.$route.query.id", this.$route.query.id)
    axios.get("/api/content/get_content?id=" + this.$route.query.id).then((res) => {
      if (res.data.code === 200) {
        this.title = res.data.data.title;
        this.html = res.data.data.html;
        this.markdown = res.data.data.content;
      } else {
        this.$message.error(res.data.msg);
        this.$router.go(-1);
      }
    }).catch(() => {
      this.$message.error("系统繁忙，请稍后再试！");
      this.$router.go(-1);
    });

    axios.get("/api/content/can_edit?id=" + this.$route.query.id).then(res => {
      this.canEdit = res.data.code === 200;
    })
  }

}
</script>
<style scoped>

.title {
  margin-top: 10px;
  float: left;
}

.button {
  margin-top: 7px;
  float: right;
}

.editor {
  height: 100%;
  margin-top: 15px;
}

</style>
